[V0_FILE]typescriptreact:file="components/hero-section.tsx" isMerged="true" export function HeroSection() { return (

Alex Morgan

Full-Stack Web Developer

Building accessible, performant web applications with modern technologies. Specialized in creating seamless user experiences from frontend to backend.

) } [V0_FILE]typescriptreact:file="components/skills-section.tsx" isMerged="true" export function SkillsSection() { const skills = { frontend: [ 'React', 'Next.js', 'TypeScript', 'Tailwind CSS', 'HTML/CSS', 'JavaScript', ], backend: [ 'Node.js', 'Express', 'PostgreSQL', 'MongoDB', 'REST APIs', 'GraphQL', ], tools: ['Git', 'Docker', 'AWS', 'Vercel', 'CI/CD', 'Testing'], } return (

Technical Skills

Frontend Development

{skill}

Backend Development

{skill}

Tools & Technologies

{skill}

) } [V0_FILE]typescriptreact:file="components/projects-section.tsx" isMerged="true" import { ProjectCard } from './project-card' const projects = [ { title: 'E-Commerce Platform', description: 'Full-stack e-commerce solution with payment integration, real-time inventory management, and admin dashboard.', tags: ['Next.js', 'PostgreSQL', 'Stripe', 'Tailwind'], image: '/modern-ecommerce-dashboard.png', }, { title: 'Task Management App', description: 'Collaborative task management tool with real-time updates, team workspaces, and progress tracking.', tags: ['React', 'Node.js', 'MongoDB', 'WebSocket'], image: '/task-management-interface.png', }, { title: 'Analytics Dashboard', description: 'Data visualization dashboard with interactive charts, custom metrics, and export functionality.', tags: ['TypeScript', 'Express', 'Chart.js', 'PostgreSQL'], image: '/analytics-dashboard-charts.png', }, { title: 'Social Media API', description: 'RESTful API for social networking with authentication, post management, and real-time notifications.', tags: ['Node.js', 'Express', 'JWT', 'Redis'], image: '/api-documentation-interface.png', }, { title: 'Blog Platform', description: 'Content management system with markdown support, SEO optimization, and comment moderation.', tags: ['Next.js', 'MDX', 'Supabase', 'TypeScript'], image: '/modern-blog-interface.jpg', }, { title: 'Weather Forecast App', description: 'Real-time weather application with location services, interactive maps, and 7-day forecasts.', tags: ['React', 'OpenWeather API', 'Mapbox', 'Tailwind'], image: '/weather-app-interface.png', }, ] export function ProjectsSection() { return (

Recent Projects

{projects.map((project) => ( ))}

) } [V0_FILE]typescriptreact:file="components/project-card.tsx" isMerged="true" import Image from 'next/image' interface ProjectCardProps { title: string description: string tags: string[] image: string } export function ProjectCard({ title, description, tags, image, }: ProjectCardProps) { return (

{title}

{description}

{tags.map((tag) => ( {tag} ))}

) } [V0_FILE]typescriptreact:file="components/contact-section.tsx" isMerged="true" import { Mail, Github, Linkedin, Globe } from 'lucide-react' export function ContactSection() { return (

Get In Touch

I'm currently available for freelance work and open to discussing new opportunities. Feel free to reach out if you'd like to collaborate or just want to say hello.

alex@example.com GitHub LinkedIn Website

) } [V0_FILE]png:file="public/modern-ecommerce-dashboard.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-ecommerce-dashboard-MAAdLeLkiUB12WR3PdfMU86WcMobEH.png" isMerged="true" [V0_FILE]png:file="public/analytics-dashboard-charts.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/analytics-dashboard-charts-bfvzGrsela8xslvhLn0TdCC02Kml9b.png" isMerged="true" [V0_FILE]png:file="public/api-documentation-interface.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/api-documentation-interface-O9u9ScEfsxxMzjxZSeqyNSmx5Ga22u.png" isMerged="true" [V0_FILE]jpg:file="public/modern-blog-interface.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-blog-interface-ombl4kCtsd5n5rfYB2tS7iWAbCu3RM.jpg" isMerged="true" [V0_FILE]png:file="public/weather-app-interface.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/weather-app-interface-r4MyjPbvAsLFZZJLAX3vk6cPfiAcyK.png" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.3", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]png:file="public/professional-developer-avatar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-developer-avatar-uYgGQKMAOh5KVhhgI6aFD1CLrHXn8H.png" isMerged="true" [V0_FILE]jpg:file="public/professional-man.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-man-UcB2RWPbnf0b6bGDZxcvMgG3QYJvIm.jpg" isMerged="true" [V0_FILE]png:file="public/professional-woman-diverse.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-woman-diverse-x99qTJySpGBT4ECiP8mYYq54It3qRx.png" isMerged="true" [V0_FILE]png:file="public/generic-company-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/generic-company-logo-gadDXcGoNOQwQRYR9hCVfk3xpsWcMI.png" isMerged="true" [V0_FILE]png:file="public/modern-ecommerce-website.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-ecommerce-website-cmxUmZcGOlNDhyCnVSCNSzAbTRqfkt.png" isMerged="true" [V0_FILE]png:file="public/task-management-interface.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/task-management-interface-8XDsvYTmLbuYn0BEbA14aeK2pXRWIe.png" isMerged="true" [V0_FILE]jpg:file="public/minimalist-portfolio-design.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/minimalist-portfolio-design-0PREtZUBUs2unD3T8IrX1NexhecEYM.jpg" isMerged="true" [V0_FILE]png:file="public/analytics-dashboard.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/analytics-dashboard-tTVfketHIFgdr40INmGUY3VvB4GAfM.png" isMerged="true" [V0_FILE]png:file="public/banking-app-interface.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/banking-app-interface-XSQfAVBm6Xyq0oq332duDppwGXzVxc.png" isMerged="true" [V0_FILE]png:file="public/restaurant-website-design.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/restaurant-website-design-FmI2ENV3BYFRH5R6mDPegVQlDVZ5Hd.png" isMerged="true" [V0_FILE]png:file="public/web-development-coding.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/web-development-coding-787u4nfKev0q0lYL9J3vtZocUfEaWh.png" isMerged="true" [V0_FILE]jpg:file="public/software-architecture.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/software-architecture-RVpSZ2EBF3G9tra4kCH39qgF20aU3k.jpg" isMerged="true" [V0_FILE]png:file="public/ui-ux-design-concept.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ui-ux-design-concept-1rSa01rF2LKb04CUHzgSZF42w8utT1.png" isMerged="true" [V0_FILE]jpg:file="public/tech-company-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tech-company-logo-0BfMCreti6W0cleWY9vI7TwAhaEuyL.jpg" isMerged="true" [V0_FILE]png:file="public/startup-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/startup-logo-kSd26CqCOyJR9AKpCoRLZ5xvhptKhH.png" isMerged="true" [V0_FILE]png:file="public/design-agency-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/design-agency-logo-YHvGwQGIWyHUHNacPSQ1MIqwjb5sFU.png" isMerged="true" [V0_FILE]png:file="public/software-company-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/software-company-logo-ydfLyga0XonSJFxgnNFCxQTPQ72fh7.png" isMerged="true" [V0_FILE]jpg:file="public/web-agency-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/web-agency-logo-xdlhnXpWZHG0OFlwH7tND1ElqFYQIn.jpg" isMerged="true" [V0_FILE]jpg:file="public/app-development-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/app-development-logo-SYM6WS2jLVYT8J3bYcGW1k833geG0Y.jpg" isMerged="true" [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type { Metadata } from 'next' import { Poppins } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const poppins = Poppins({ subsets: ["latin"], weight: ['300', '400', '500', '600', '700'], variable: '--font-poppins' }); export const metadata: Metadata = { title: 'John Doe - Full-Stack Developer', description: 'Portfolio of John Doe, a Full-Stack Developer specializing in modern web technologies', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true" 'use client' import { Moon, Sun } from 'lucide-react' import { useEffect, useState } from 'react' export function ThemeToggle() { const [theme, setTheme] = useState<'light' | 'dark'>('dark') useEffect(() => { // Check for saved theme preference or default to dark const savedTheme = localStorage.getItem('theme') as 'light' | 'dark' | null if (savedTheme) { setTheme(savedTheme) document.documentElement.classList.toggle('dark', savedTheme === 'dark') } else { document.documentElement.classList.add('dark') } }, []) const toggleTheme = () => { const newTheme = theme === 'dark' ? 'light' : 'dark' setTheme(newTheme) document.documentElement.classList.toggle('dark', newTheme === 'dark') localStorage.setItem('theme', newTheme) } return ( ) } [V0_FILE]typescriptreact:file="components/profile-sidebar.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Mail, Phone, Calendar, MapPin } from 'lucide-react' import { Github, Twitter, Instagram } from 'lucide-react' import { profileData } from '@/lib/portfolio-data' interface ProfileSidebarProps { data?: typeof profileData } export function ProfileSidebar({ data = profileData }: ProfileSidebarProps) { return (

{/* Profile Image */}

{data.name}

{data.title}

{/* Divider */}

{/* Contact Info */}

{data.email}

Phone

{data.phone}

Birthday

{data.birthday}

Location

{data.location}

{/* Social Links */}

) } [V0_FILE]typescriptreact:file="components/about-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { PenTool, Code, Smartphone, Zap } from 'lucide-react' import { aboutData } from '@/lib/portfolio-data' const iconMap = { Code, Zap, Smartphone, PenTool, } interface AboutSectionProps { data?: typeof aboutData } export function AboutSection({ data = aboutData }: AboutSectionProps) { return (

{/* About Me */}

About Me

{data.description.map((paragraph, index) => (

{paragraph}

))}

{/* What I'm Doing */}

What I'm Doing

{data.services.map((service, index) => { const IconComponent = iconMap[service.icon as keyof typeof iconMap] return (

{service.title}

{service.description}

) })}

{/* Testimonials with Marquee Animation */}

Testimonials

{[...data.testimonials, ...data.testimonials].map((testimonial, index) => (

{testimonial.name}

{testimonial.text}

))}

{/* Clients with Marquee Animation */}

Clients

{[...data.clients, ...data.clients].map((client, index) => (

))}

) } [V0_FILE]typescriptreact:file="components/resume-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { BookOpen, Briefcase } from 'lucide-react' import { resumeData } from '@/lib/portfolio-data' interface ResumeSectionProps { data?: typeof resumeData } export function ResumeSection({ data = resumeData }: ResumeSectionProps) { return (

Resume

{/* Education */}

Education

{data.education.map((item, index) => (

{item.title}

{item.period}

{item.description}

))}

{/* Experience */}

Experience

{data.experience.map((item, index) => (

{item.title}

{item.period}

{item.description}

))}

{/* Skills */}

My Skills

{data.skills.map((skill, index) => (

{skill.name} {skill.level}%

))}

) } [V0_FILE]typescriptreact:file="components/portfolio-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" 'use client' import { useState } from 'react' import { ExternalLink, Eye } from 'lucide-react' import { portfolioData } from '@/lib/portfolio-data' interface PortfolioSectionProps { data?: typeof portfolioData } export function PortfolioSection({ data = portfolioData }: PortfolioSectionProps) { const [activeFilter, setActiveFilter] = useState('all') const filteredProjects = activeFilter === 'all' ? data.projects : data.projects.filter((p) => p.category === activeFilter) return (

Portfolio

{/* Filter Buttons */}

{data.categories.map((category) => ( ))}

{filteredProjects.map((project, index) => (

{project.title}

{/* Action Buttons */}

Preview Visit

{/* Category Badge - Always visible */}

{project.category}

))}

) } [V0_FILE]typescriptreact:file="components/blog-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Calendar, Clock, ArrowRight } from 'lucide-react' import { blogData } from '@/lib/portfolio-data' interface BlogSectionProps { data?: typeof blogData } export function BlogSection({ data = blogData }: BlogSectionProps) { return (

Blog

{data.posts.map((post, index) => (

{post.category} {post.date} {post.readTime}

{post.title}

{post.excerpt}

{/* Tags */}

{post.tags.map((tag, i) => ( {tag} ))}

{/* Read More Link */} Read More

))}

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { /* Improved light theme with softer colors and better contrast */ --background: oklch(0.99 0 0); --foreground: oklch(0.15 0 0); --card: oklch(0.98 0.005 240); --card-foreground: oklch(0.15 0 0); --popover: oklch(0.99 0 0); --popover-foreground: oklch(0.15 0 0); --primary: oklch(0.15 0 0); --primary-foreground: oklch(0.99 0 0); --secondary: oklch(0.96 0.01 240); --secondary-foreground: oklch(0.15 0 0); --muted: oklch(0.55 0 0); --muted-foreground: oklch(0.45 0.01 240); --accent: oklch(0.55 0.22 240); --accent-foreground: oklch(0.99 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.9 0.01 240); --input: oklch(0.9 0.01 240); --ring: oklch(0.55 0.22 240); --chart-1: oklch(0.4 0 0); --chart-2: oklch(0.5 0 0); --chart-3: oklch(0.6 0 0); --chart-4: oklch(0.7 0 0); --chart-5: oklch(0.8 0 0); --radius: 0.75rem; --sidebar: oklch(0.97 0.01 240); --sidebar-foreground: oklch(0.15 0 0); --sidebar-primary: oklch(0.15 0 0); --sidebar-primary-foreground: oklch(0.99 0 0); --sidebar-accent: oklch(0.93 0.01 240); --sidebar-accent-foreground: oklch(0.15 0 0); --sidebar-border: oklch(0.9 0.01 240); --sidebar-ring: oklch(0.55 0.22 240); } .dark { /* Updated accent color to blue instead of yellow */ --background: oklch(0.12 0.01 264); --foreground: oklch(0.95 0 0); --card: oklch(0.15 0.01 264); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.15 0.01 264); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.95 0 0); --primary-foreground: oklch(0.12 0.01 264); --secondary: oklch(0.2 0.01 264); --secondary-foreground: oklch(0.95 0 0); --muted: oklch(0.4 0 0); --muted-foreground: oklch(0.6 0 0); --accent: oklch(0.65 0.2 240); --accent-foreground: oklch(0.95 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.22 0.01 264); --input: oklch(0.22 0.01 264); --ring: oklch(0.65 0.2 240); --chart-1: oklch(0.5 0 0); --chart-2: oklch(0.6 0 0); --chart-3: oklch(0.7 0 0); --chart-4: oklch(0.8 0 0); --chart-5: oklch(0.9 0 0); --sidebar: oklch(0.15 0.01 264); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.95 0 0); --sidebar-primary-foreground: oklch(0.12 0.01 264); --sidebar-accent: oklch(0.2 0.01 264); --sidebar-accent-foreground: oklch(0.95 0 0); --sidebar-border: oklch(0.22 0.01 264); --sidebar-ring: oklch(0.65 0.2 240); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Added scrollbar hiding utility for mobile navigation */ @layer utilities { .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; } } /* Updated profile picture border animation to subtle shining effect */ @keyframes pulse-slow { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.8; } } .animate-pulse-slow { animation: pulse-slow 3s ease-in-out infinite; } /* Added marquee animations for testimonials and clients */ @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes marquee-slow { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .animate-marquee { animation: marquee 30s linear infinite; } .animate-marquee-slow { animation: marquee-slow 40s linear infinite; } .animate-marquee:hover, .animate-marquee-slow:hover { animation-play-state: paused; } [V0_FILE]typescriptreact:file="lib/portfolio-data.ts" isMerged="true" export const profileData = { name: 'John Doe', title: 'Full-Stack Developer', avatar: '/professional-developer-avatar.png', email: 'john@example.com', phone: '+1 (234) 567-890', birthday: 'June 15, 1995', location: 'San Francisco, California, USA', social: { github: 'https://github.com/johndoe', twitter: 'https://twitter.com/johndoe', instagram: 'https://instagram.com/johndoe', }, } export const aboutData = { description: [ "I'm a Full-Stack Developer from San Francisco, California, specializing in web development and creating innovative digital solutions. I enjoy turning complex problems into simple, beautiful and intuitive applications.", "My job is to build your website or application so that it is functional and user-friendly but at the same time attractive. Moreover, I add personal touch to your product and make sure that is eye-catching and easy to use. My aim is to bring across your message and identity in the most creative way. I've worked with various technologies including React, Next.js, Node.js, and modern cloud platforms.", ], services: [ { icon: 'Code', title: 'Frontend Development', description: 'Building modern, responsive web applications with React, Next.js, and TypeScript.', }, { icon: 'Zap', title: 'Backend Development', description: 'Creating robust APIs and server-side solutions with Node.js and modern frameworks.', }, { icon: 'Smartphone', title: 'Mobile Development', description: 'Professional development of mobile applications with React Native and modern tools.', }, { icon: 'PenTool', title: 'UI/UX Design', description: 'Designing intuitive and beautiful user interfaces that enhance user experience.', }, ], testimonials: [ { avatar: '/professional-man.jpg', name: 'Daniel Lewis', text: 'John was hired to create a corporate identity. We were very pleased with the work done. He has a lot of experience and is very concerned about the needs of client.', }, { avatar: '/professional-woman-diverse.png', name: 'Jessica Miller', text: 'John was hired to create a corporate identity. We were very pleased with the work done. He has a lot of experience and is very concerned about the needs of client.', }, { avatar: '/professional-man.jpg', name: 'Michael Chen', text: 'Outstanding work! John delivered a high-quality product that exceeded our expectations. His attention to detail is remarkable.', }, { avatar: '/professional-woman-diverse.png', name: 'Sarah Johnson', text: 'Professional, creative, and highly skilled. John is the developer you want on your team for any complex project.', }, ], clients: [ { name: 'TechCorp', logo: '/tech-company-logo.jpg' }, { name: 'StartupHub', logo: '/startup-logo.png' }, { name: 'DesignStudio', logo: '/design-agency-logo.png' }, { name: 'CodeLabs', logo: '/software-company-logo.png' }, { name: 'WebSolutions', logo: '/web-agency-logo.jpg' }, { name: 'AppMakers', logo: '/app-development-logo.jpg' }, ], } export const resumeData = { education: [ { title: 'University of California, Berkeley', period: '2013 — 2017', description: 'Studied Computer Science with a focus on web technologies and software engineering principles.', }, { title: 'Frontend Development Bootcamp', period: '2017 — 2018', description: 'Intensive program covering modern JavaScript frameworks, responsive design, and UX principles.', }, ], experience: [ { title: 'Senior Full-Stack Developer', period: '2020 — Present', description: 'Leading development of scalable web applications using React, Node.js, and cloud technologies. Mentoring junior developers and implementing best practices.', }, { title: 'Full-Stack Developer', period: '2018 — 2020', description: 'Developed and maintained multiple client projects using modern web technologies. Collaborated with design teams to create seamless user experiences.', }, ], skills: [ { name: 'Web Design', level: 90 }, { name: 'Frontend Development', level: 95 }, { name: 'Backend Development', level: 85 }, { name: 'Database Design', level: 80 }, ], } export const portfolioData = { categories: ['all', 'web design', 'applications', 'web development'], projects: [ { title: 'E-Commerce Platform', category: 'web development', image: '/modern-ecommerce-website.png', description: 'Full-stack e-commerce solution with payment integration', tech: ['Next.js', 'Node.js', 'PostgreSQL'], liveUrl: 'https://example.com', githubUrl: 'https://github.com/johndoe/ecommerce', }, { title: 'Task Management App', category: 'applications', image: '/task-management-interface.png', description: 'Collaborative task manager with real-time updates', tech: ['React', 'Firebase', 'TypeScript'], liveUrl: 'https://example.com', githubUrl: 'https://github.com/johndoe/taskmanager', }, { title: 'Portfolio Website', category: 'web design', image: '/minimalist-portfolio-design.jpg', description: 'Modern portfolio design for creative professionals', tech: ['Next.js', 'Tailwind CSS', 'Framer Motion'], liveUrl: 'https://example.com', githubUrl: 'https://github.com/johndoe/portfolio', }, { title: 'Social Media Dashboard', category: 'web development', image: '/analytics-dashboard.png', description: 'Analytics dashboard with data visualization', tech: ['React', 'D3.js', 'Express'], liveUrl: 'https://example.com', githubUrl: 'https://github.com/johndoe/dashboard', }, { title: 'Mobile Banking App', category: 'applications', image: '/banking-app-interface.png', description: 'Secure mobile banking application', tech: ['React Native', 'Node.js', 'MongoDB'], liveUrl: 'https://example.com', githubUrl: 'https://github.com/johndoe/banking', }, { title: 'Restaurant Website', category: 'web design', image: '/restaurant-website-design.png', description: 'Elegant restaurant website with online ordering', tech: ['Next.js', 'Sanity CMS', 'Stripe'], liveUrl: 'https://example.com', githubUrl: 'https://github.com/johndoe/restaurant', }, ], } export const blogData = { posts: [ { title: 'Building Modern Web Applications with Next.js 15', category: 'Development', date: 'Mar 15, 2024', readTime: '8 min', image: '/web-development-coding.png', excerpt: 'Deep dive into Next.js 15 features and App Router enhancements.', tags: ['Next.js', 'React', 'Web Development'], slug: 'building-modern-web-apps-nextjs-15', }, { title: 'Microservices Architecture: A Complete Guide', category: 'Architecture', date: 'Mar 8, 2024', readTime: '12 min', image: '/software-architecture.jpg', excerpt: 'Design scalable microservices with real-world examples.', tags: ['Architecture', 'Backend', 'DevOps'], slug: 'microservices-architecture-guide', }, { title: 'The Art of UI/UX: Creating Delightful Experiences', category: 'Design', date: 'Feb 28, 2024', readTime: '6 min', image: '/ui-ux-design-concept.png', excerpt: 'Principles of exceptional UI/UX design for interfaces users love.', tags: ['Design', 'UI/UX', 'Frontend'], slug: 'art-of-uiux-delightful-experiences', }, { title: 'TypeScript Best Practices for Large-Scale Applications', category: 'Development', date: 'Feb 20, 2024', readTime: '10 min', image: '/web-development-coding.png', excerpt: 'Master TypeScript patterns for maintainable, type-safe code.', tags: ['TypeScript', 'JavaScript', 'Best Practices'], slug: 'typescript-best-practices', }, { title: 'Building Real-Time Applications with WebSockets', category: 'Development', date: 'Feb 12, 2024', readTime: '9 min', image: '/software-architecture.jpg', excerpt: 'Implement real-time features using WebSockets and modern frameworks.', tags: ['WebSockets', 'Real-time', 'Backend'], slug: 'realtime-apps-websockets', }, { title: 'Mastering CSS Grid and Flexbox Layouts', category: 'Design', date: 'Feb 5, 2024', readTime: '7 min', image: '/ui-ux-design-concept.png', excerpt: 'Modern CSS layout techniques with practical examples.', tags: ['CSS', 'Layout', 'Frontend'], slug: 'mastering-css-grid-flexbox', }, ], } export const contactData = { email: 'john@example.com', phone: '+1 (234) 567-890', location: 'San Francisco, CA', mapEmbedUrl: 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d100940.14220298434!2d-122.50764017406082!3d37.75767381338211!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80859a6d00690021%3A0x4a501367f076adff!2sSan%20Francisco%2C%20CA%2C%20USA!5e0!3m2!1sen!2sus!4v1234567890123!5m2!1sen!2sus', } [V0_FILE]typescriptreact:file="components/contact-section-new.tsx" isEdit="true" isQuickEdit="true" 'use client' import { Mail, Phone, MapPin, Send } from 'lucide-react' import { useState } from 'react' import { contactData } from '@/lib/portfolio-data' interface ContactSectionProps { data?: typeof contactData } export function ContactSection({ data = contactData }: ContactSectionProps) { const [formData, setFormData] = useState({ name: '', email: '', message: '', }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Handle form submission console.log('Form submitted:', formData) } return (

About

Tags

Share

About

Tags

Share

More from starknightt

More Templates Like This

About

Tags

Share

About

Tags

Share

More from starknightt

More Templates Like This